<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h2,
      p {
        text-align: center;
      }

      .student {
        overflow: hidden;
        margin: 0 auto;
        /* 合并相邻边框 */
        border-collapse: collapse;
        text-align: center;
        border-radius: 10px 10px 0 0;
      }

      .student tr {
        cursor: pointer;
      }

      .student th {
        padding: 5px 50px;
        color: #fff;
      }

      .student,
      th,
      td {
        border: 1px solid #fff;
        line-height: 45px;
      }

      /* 给行添加渐变背景颜色 */
      .student thead tr {
        background-image: linear-gradient(to right, #f46e33, #f057a5);
      }

      /* 从第2行开始修改背景颜色 */
      .student tbody tr {
        background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
      }

      /* 从第2行开始 最后一个单元格颜色变化 */
      .student tbody tr :last-child {
        color: #f282bb;
      }

      /* 第一行鼠标经过不要变颜色 */
      .student tbody tr:hover {
        background-image: linear-gradient(to right, #f9e3da, #f9d6e8);
      }
    </style>
  </head>
  <body>
    <script>
      let sales = [
        { name: '小明', age: 18, gender: '男', money: 30, status: 0 },
        { name: '小红', age: 26, gender: '女', money: 99, status: 3 },
        { name: '小刚', age: 19, gender: '男', money: 88, status: 2 },
        { name: '小丽', age: 20, gender: '女', money: 67, status: 1 },
        { name: '晓强', age: 23, gender: '女', money: 77, status: 1 },
        { name: '小张', age: 25, gender: '女', money: 80, status: 2 },
      ]
      function data(items) {
        let html = ''
        //新建数组
        const arr = []
        for (let i = 0; i < sales.length; i++) {
          let obj = {}
          obj = sales[i]
          arr.push(obj)
        }
        //数据从大到小排序（冒泡排序）
        for (let i = 0; i < arr.length - 1; i++) {
          let flag = true
          for (let j = 0; j < arr.length - i - 1; j++) {
            if (arr[j].money < arr[j + 1].money) {
              flag = false
              let temp = arr[j]
              arr[j] = arr[j + 1]
              arr[j + 1] = temp
            }
          }
          if (flag) break
        }
        //销售金额带单位w
        for (let i = 0; i < arr.length; i++) {
          arr[i].money = arr[i].money + 'w'
        }
        //显示销售状态
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].status === 0) {
            arr[i].status = '未及格'
          }
          if (arr[i].status === 1) {
            arr[i].status = '及格'
          }
          if (arr[i].status === 2) {
            arr[i].status = '良好'
          }
          if (arr[i].status === 3) {
            arr[i].status = '优秀'
          }
        }
        for (let i = 0; i < arr.length; i++) {
          html += `
      <tbody>
        <tr>
          <td>${i + 1}</td>
          <td>${arr[i].name}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].money}</td>
          <td>${arr[i].status}</td>
        </tr>
      </tbody>`
        }
        return html
      }
      document.write(`<table class="student">
      <thead>
        <tr>
          <th>名次</th>
          <th>姓名</th>
          <th>年纪</th>
          <th>性别</th>
          <th>销售额</th>
          <th>业绩状态</th>
        </tr>
      </thead>`)
      document.write(data(sales))
      document.write(`</table>`)
    </script>
  </body>
</html>
